সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।
উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন
ট্রাঞ্জিশন
নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :
একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে
নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।
নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ <div> এলিমেন্ট। এই <div> এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি ৩ সেকেন্ড অর্থাৎ ইফেক্টটি ৩ সেকেন্ড ধরে কাজ করবে :
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p> ট্রানজিশন প্রভাব দেখার জন্য ডিভ এলিমেন্টের উপর হোভার করুন। </p>
</body>
</html>
যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে।
এখন, width প্রোপার্টির একটি নতুন ভ্যালু নির্দিষ্ট করে যখন ব্যবহারকারী তার মাউস <div> এলিমেন্টের উপর নিয়ে যাবেঃ
div:hover {
width: 400px;
}
লক্ষ্য করুন যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে যায়।
নিচের উদাহরণে width এবং height উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে এখানে width এর জন্য সময়ব্যাপ্তি ৩ সেকেন্ড এবং height এর জন্য ৪ সেকেন্ড নির্ধারণ করা হয়েছে :
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s, height 4s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s, height 4s;
}
div:hover {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
</body>
</html>
transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্দেশ করা হয়।
transition-timing-function প্রোপার্টির জন্য নিচের ভ্যালুগুলো ব্যবহার করা যেতে পারে :
ease - এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ করবে (এটি ডিফল্ট)।linear - এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in - এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out - এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out - এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n) - cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।নিচের উদাহরণে ব্যবহারযোগ্য কিছু ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে :
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 3s;/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 3s;
}
/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
#linear {-webkit-transition-timing-function: linear;}
#ease {-webkit-transition-timing-function: ease;}
#ease-in {-webkit-transition-timing-function: ease-in;}
#ease-out {-webkit-transition-timing-function: ease-out;}
#ease-in-out {-webkit-transition-timing-function: ease-in-out;}
/* স্ট্যান্ডার্শ সিন্ট্যাক্স */
#linear {transition-timing-function: linear;}
#ease {transition-timing-function: ease;}
#ease-in {transition-timing-function: ease-in;}
#ease-out {transition-timing-function: ease-out;}
#ease-in-out {transition-timing-function: ease-in-out;}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div id="linear">linear</div><br>
<div id="ease">ease</div><br>
<div id="ease-in">ease-in</div><br>
<div id="ease-out">ease-out</div><br>
<div id="ease-in-out">ease-in-out</div><br>
<p>প্রতিক্রিয়া দেখার জন্য ডিভ এলিমেন্টের উপর মাউস এর কার্সরটি নিয়ে যান।</p>
</body>
</html>
transition-delay প্রোপার্টির নির্দেশ করে যে ট্রানজিশন ইফেক্টটি বিলম্বে শুরু হবে
নিচের উদাহরণে ট্রানজিশন ইফেক্টটি শুরু হতে ১ সেকেন্ড বিলম্ব করেঃ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 2s; /* সাফারির জন্য */
-webkit-transition-delay: 1s; /* সাফারির জন্য */
transition: width 2s;
transition-delay: 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>
</body>
</html>
নিচের উদাহরণে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছেঃ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background:green;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* সাফারির জন্য */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 350px;
height: 350px;
-webkit-transform: rotate(180deg); /* সাফারির জন্য */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
<p>div এলিমেন্টের উপর মাউস হোভার করলে ট্রানজেশন প্রভাব দেখতে পারবেন।</p>
</body>
</html>
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলো একটি একটি করে নির্ধারণ করা যায় :
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background:green;
/* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
/* স্ট্যান্ডার্ড সিন্ট্যাক্স */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p> উপরের ডিভ এলিমেন্টে মাউস নিয়ে গেলে ট্রানজেশনের প্রভাব দেখা যাবে।</p>
<p><b>নোটঃ</b> ট্রানজেশনের প্রভাব ১ সেকেন্ড পর শুরু হবে।</p>
</body>
</html>
অথবা transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করেও নির্ধারণ করা যায়ঃ
<!DOCTYPE html>
<html>
<head>
<title>css transition example</title>
<style>
div {
width: 120px;
height: 120px;
background: green;
-webkit-transition: width 2s linear 1s; /* সাফারি ৩.১ থেকে ৬.০ এর জন্য */
transition: width 2s linear 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
<p>ট্রানজিশনের প্রভাব দেখার জন্য ডিভ এলিমেন্টির উপরে হোভার করুন।</p>
<p><b>নোটঃ</b>ট্রানজিশনের প্রভাব শুরু হতে ১ সেকেন্ড বিলম্ব হবে।</p>
</body>
</html>
নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।
টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
